<template>
	
		<!-- 
		v-bind  : 组件属性要使用data中定义的数据变量，或者组件属性要是用表达式，要是用v-bind制定   简写为: :class="name"
		v-on	: 绑定事件   简写为：@click="事件名称"
		v-mode	: 数据的双休绑定
		v-if	: 条件判断,决定某个内容或者区块是否挂载显示
		v-show	: 条件判断,符合条件显示,否则隐藏
		block	: 空标签,不会显示  也可以使用<template>
		
		 -->
		 
	<view class="">
		<!-- v-bind  v-on -->
		<view :class="msg" :date="1+1">
			{{msg}}
			<button v-on:click="show">点我</button>
		</view>
		<input type="text" v-model="msg" />
		<view v-if="flag">vue</view>
		<view v-else>H5</view>
				
		<block v-if="flag">
			<view class="">a</view>
			<view class="">b</view>
		</block>
		
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
		<view v-for="(item,index) in person" :key="index">
			{{index}}:{{item}}
		</view>
		<view v-for="(item,index) in persons" :key="index">
			<view>{{item.id}}--{{item.name}}</view>
		</view>
		
		
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() { /* 数据绑定  初始化数据使用*/
			return {
				msg:'hello',
				arr:[1,2,3,4],
				person:{
					name:'tom',
					age:12
				},
				persons:[
					{id:0, name:'zxw'},
					{id:1, name:'esz'},
					{id:2, name:'ews'},
					{id:3, name:'egx'},
					],
				flag:true
			}
		},
		onLoad() {
			setTimeout(()=> {
				this.msg = this.msg + 'zxw'
			}, 2000)

		},
		methods: { /* 自定义函数 方法*/
			show(){
				console.log('点击了按钮');
			}
		}
	}
</script>

<style>
	
</style>
